<template>
  <!-- 兑换记录-->
  <div class="welMain">
    <div class="searchDiv">
      <el-form :inline="true" :model="formInline" ref="postForm" :rules="rulesInline" class="demo-form-inline"
               size="mini">
        <el-form-item label="兑换方式">
          <el-select v-model="formInline.exchangeType">
            <el-option
              v-for="item in  exchangeTypeOption "
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付方式">
          <el-select v-model="formInline.payType">
            <el-option
              v-for="item in payTypeOption "
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="会员">
          <el-input v-model="formInline.account" placeholder="请输入会员"></el-input>
        </el-form-item>
        <el-form-item label="收货人手机号">
          <el-input v-model="formInline.recipientPhone" placeholder="请输入收货人手机号"></el-input>
        </el-form-item>
        <el-form-item label="兑换商品">
          <el-input v-model="formInline.name" placeholder="请输入兑换商品"></el-input>
        </el-form-item>
        <el-form-item label="兑换时期">
          <div class="datePicker">
            <el-date-picker
              v-model="formInline.redeemBeginTime"
              type="datetime"
              placeholder="选择开始日期时间">
            </el-date-picker>
            <div class='dateStyle'>-</div>
            <el-date-picker
              v-model="formInline.redeemEndTime"
              type="datetime"
              placeholder="选择结束日期时间">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="发货状态">
          <el-select v-model="formInline.deliveryStatus">
            <el-option
              v-for="item in deliveryStatusOption "
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="buttonStyle">
        <el-button type="primary" size="mini" @click="handleQuery">筛选</el-button>
        <el-button type="primary" size="mini" @click="resetQuery">重置</el-button>
        <el-button type="primary" size="mini" @click="handleExport">导出</el-button>
        <el-button type="primary" size="mini" @click="sendOutGoods">发货</el-button>
      </div>
    </div>
    <div class="tableStyle" style="height: 500px; overflow-y: auto;">
      <el-table :data="tableData" style="width: 100%"
                @row-click="singleElection"
                :height="tableHeight"
                :max-height="tableHeight"
                :header-cell-style="{textAlign: 'center',background:'#eeeeee',color:'rgb(68 65 65)',fontFamily:'MicrosoftYaHeiUI', position: 'sticky', top: 0, zIndex: 1 }"
                :cell-style="{ textAlign: 'center' }" row-key="index" highlight-current-row
      >
        <el-table-column width="35">
          <template slot-scope="scope">
            {{ scope.$index+1 }}
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="30">
          <template slot-scope="scope">
            <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
            <!-- 注意：这里写 &nbsp 的目的是为了页面不显示内容，只显示单选操作 -->
            <el-radio class="radio" v-model="templateSelection" :label="scope.row.id">
              &nbsp;
            </el-radio>
          </template>
        </el-table-column>

        <el-table-column prop="deliveryStatus" label="发货状态">
          <template slot-scope="scope">
            {{ scope.row.deliveryStatus === 0 ? '待发货': scope.row.deliveryStatus === 1? '已发货' :scope.row.deliveryStatus === 2?"待支付" :'已收货'}}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="积分商品">
        </el-table-column>
        <el-table-column prop="redeemIntegral" label="积分兑换">
          <template slot-scope="scope">
            <span v-if=" scope.row.payType === '0' ">
              {{scope.row.redeemIntegral}}
            </span>
            <span v-else>
           /
            </span>
          </template>
        </el-table-column>

        <el-table-column prop="integralCash" label="积分+现金">
          <template slot-scope="scope">
            <span v-if=" scope.row.payType === '0' ">
          /
            </span>
            <span v-else>
                    {{ scope.row.cash  ? scope.row.redeemIntegral+scope.row.cash: scope.row.redeemIntegral  }}

            </span>
          </template>
        </el-table-column>

        <el-table-column prop="payType" label="支付方式">
       <template slot-scope="scope">
           {{ scope.row.payType === '0' ? '积分兑换': scope.row.payType === '1'? '支付宝 ' :"微信支付" }}
          </template>
        </el-table-column>
        <el-table-column prop="exchangeCount" label="兑换数量">
      </el-table-column>
        <el-table-column prop="account" label=" 会员">
        </el-table-column>
        <el-table-column prop="redeemTime" label="兑换时间">
        </el-table-column>
        <el-table-column prop="deliveryTime" label="发货时间">
        </el-table-column>
        <el-table-column prop="recipientName" label="收货人姓名">
        </el-table-column>
        <el-table-column prop="recipientPhone" label="收货人手机号">
        </el-table-column>
        <el-table-column prop="recipientAddress" label="收货地址">
        </el-table-column>
        <el-table-column prop="logisticsCompany" label="物流公司">
        </el-table-column>
        <el-table-column prop="logisticsNumber" label="物流单号">
        </el-table-column>
        <el-table-column prop="drawStatus" label="是否抽奖商品">
          <template slot-scope="scope">
            {{ scope.row.drawStatus === 0 ? '×' : '√' }}
          </template>
        </el-table-column>
        <el-table-column prop="buyerMessage" label="买家留言">
        </el-table-column>

      </el-table>
    </div>
    <div class=" pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                     :page-sizes="[2,5, 10 ]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {deliveryStatusOption,drawStatusOption,payTypeOption,exchangeTypeOption} from '@/utils/dictionary.js';
  import {redeemrecordPages, redeemrecordDelivery} from '@/api/api.js';
  import {sendEcxel} from "@/utils/public";
  // import axios from 'axios';
  // import {api_url} from '@/utils/apiUrl'
  export default {
    data() {
      return {
        exchangeTypeOption:exchangeTypeOption,
        deliveryStatusOption:deliveryStatusOption,
        payTypeOption:payTypeOption,
        drawStatusOption: drawStatusOption,
        formInline: {
          deliveryStatus:'',
          endTime: "",
          beginTime: '',
          account: '',
          current: 1,
          size: 10,
          name:'',
          recipientPhone:'',
          exchangeType: "",
        },
        rulesInline: {},
        total: 1,
        currentPage: 1, // 分页数据
        pageSize: 10,
        tableData: [],
        //   当前选择的行的id
        templateSelection: "",
        //   当前选择的行的数据
        checkList: [],
        tableHeight: 'calc(485px )' // 例子中假设头部和其他元素占用200px高度，可以根据实际情况调整

      }
    },
    created() {
      this.getList();
    },
    methods: {
      /** 查询 列表 */
      getList() {
        redeemrecordPages(this.formInline).then(response => {
          if (response.code === 0) {
            this.tableData = response.data.records;
            this.total = response.data.total;
          } else {
            this.tableData = []
          }
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.formInline.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.formInline = {
          current: 1,
          size: 10,
        };
        this.handleQuery();
      },
      // /*
      // * table点击事件，跳转到详情
      // * */
      // openDetails(row){
      //   //0:待发货
      //   if( row.deliveryStatus===0 ){
      //     this.$router.push({
      //       path:'/drawrecord/sendOut/',
      //       query: {commodityId:row.id}
      //     });
      //   }else{
      //     return;
      //   }
      // },
      singleElection(row) {
        this.templateSelection = row.id;
        this.checkList = this.tableData.filter((item) => item.id === row.id);
      },
      // 分页的大小
      handleSizeChange(pageSize) {
        this.pageSize = pageSize;
        this.handleCurrentChange(this.currentPage);
      },
      //
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage;
        this.currentChangePage(this.tableData, currentPage);
      },
      // 页面改变
      currentChangePage(list, currentPage) {
        this.formInline.current = currentPage
        this.formInline.size = this.pageSize
        this.currentPage = currentPage
        this.getList()
      },
      /*
      *导出按钮
      * */
      handleExport() {
        // console.log(process.env,'process.env.VUE_APP_BASE_API')
        // ${process.env.VUE_APP_BASE_API}
             sendEcxel('/redeemrecord/export', this.formInline).then(res => { 
       
            // sendEcxel(`${process.env.VUE_APP_BASE_API}/redeemrecord/export`, this.formInline).then(res => { 
        // sendEcxel(`${api_url}/redeemrecord/export`, this.formInline).then(res => {  //此处请求接口
          const link = document.createElement("a");
          const blob = new Blob([res.data], {type: "application/vnd.ms-excel"});
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          let name = res.headers['content-disposition'].split('=')[1]//fileName
          link.setAttribute("download", decodeURI(name));  //报表名称可自定义
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        });
      },
      /*
    *发货按钮
    * */
      sendOutGoods() {
        console.log(this.checkList, '123')
        if (this.checkList.length > 0) {
          if (this.checkList[0].deliveryStatus === 0) {
            this.$router.push({path: '/drawrecord/sendOut', query: {id: this.checkList[0].id}})
          } else {
            this.$message({
              message: '请选择要待发货的商品',
              type: 'warning'
            });
          }
        } else {
          this.$message({
            message: '请选择要待发货的商品',
            type: 'warning'
          });
        }
      }
    },
    computed: {},
  }
</script>

<style lang="less" scoped>

  .buttonStyle {
    margin: 0 40px 0 0;
    display: flex;
    /*justify-content: flex-end;*/
  }

  .pagination-container {
    height: 28px;
    line-height: 28px;
  }

  .searchDiv {
    padding: 20px 10px 10px 20px;
    border-bottom: 1px solid #eeeeee;
  }

  .tableStyle {
    padding: 0px 10px;
    /*position: relative; !* 使内部绝对定位生效 *!*/
  }

  .datePicker {
    display: flex;

  }

  .dateStyle {
    margin: 0 5px;
  }
</style>
